// 组件渲染器
const Components = {
    // 渲染动态卡片
    renderPost(post) {
        return `
            <div class="post-card scroll-reveal" data-post-id="${post.id}">
                <div class="post-header">
                    <img src="${post.avatar}" alt="${post.author}" class="post-avatar">
                    <div class="post-meta">
                        <div class="post-author">${post.author}</div>
                        <div class="post-time">${Utils.formatTime(post.timestamp)}</div>
                    </div>
                </div>
                <div class="post-content">${post.content}</div>
                ${post.images.length > 0 ? `
                    <div class="post-images">
                        ${post.images.map(img => `
                            <img src="${img}" alt="图片" class="post-image" onclick="Components.showImageModal('${img}')">
                        `).join('')}
                    </div>
                ` : ''}
                <div class="post-actions">
                    <button class="post-action ${post.liked ? 'liked' : ''}" onclick="Components.toggleLike(${post.id})">
                        <i class="fas fa-heart"></i>
                        <span>${Utils.formatNumber(post.likes)}</span>
                    </button>
                    <button class="post-action" onclick="Components.showComments(${post.id})">
                        <i class="fas fa-comment"></i>
                        <span>${Utils.formatNumber(post.comments)}</span>
                    </button>
                    <button class="post-action" onclick="Components.sharePost(${post.id})">
                        <i class="fas fa-share"></i>
                        <span>${Utils.formatNumber(post.shares)}</span>
                    </button>
                </div>
            </div>
        `;
    },

    // 渲染相册
    renderAlbum(album) {
        return `
            <div class="album-item scroll-reveal" onclick="Components.openAlbum(${album.id})">
                <img src="${album.cover}" alt="${album.name}" class="album-cover">
                <div class="album-info">
                    <div class="album-name">${album.name}</div>
                    <div class="album-count">${album.count} 张照片</div>
                </div>
            </div>
        `;
    },

    // 渲染视频
    renderVideo(video) {
        return `
            <div class="video-item scroll-reveal" onclick="Components.playVideo('${video.url}', '${video.title}')">
                <div class="video-thumbnail">
                    <img src="${video.thumbnail}" alt="${video.title}">
                    <div class="video-duration">${video.duration}</div>
                </div>
                <div class="video-info">
                    <div class="video-title">${video.title}</div>
                    <div class="video-views">${Utils.formatNumber(video.views)} 次播放</div>
                </div>
            </div>
        `;
    },

    // 渲染日志
    renderBlog(blog) {
        return `
            <div class="blog-item scroll-reveal" onclick="Components.openBlog(${blog.id})">
                <h3 class="blog-title">${blog.title}</h3>
                <p class="blog-excerpt">${blog.excerpt}</p>
                <div class="blog-meta">
                    <span><i class="fas fa-eye"></i> ${Utils.formatNumber(blog.views)}</span>
                    <span><i class="fas fa-comment"></i> ${blog.comments}</span>
                    <span>${Utils.formatTime(blog.timestamp)}</span>
                </div>
            </div>
        `;
    },

    // 渲染访客
    renderVisitor(visitor) {
        return `
            <img src="${visitor.avatar}" alt="${visitor.name}" 
                 class="visitor-avatar" 
                 title="${visitor.name}"
                 onclick="Components.showVisitorProfile(${visitor.id})">
        `;
    },

    // 显示图片模态框
    showImageModal(src) {
        const modal = document.getElementById('imageModal');
        const modalImg = document.getElementById('modalImage');
        modal.style.display = 'block';
        modalImg.src = src;
    },

    // 播放视频
    playVideo(url, title) {
        const modal = document.getElementById('videoModal');
        const modalVideo = document.getElementById('modalVideo');
        modal.style.display = 'block';
        modalVideo.src = url;
        modalVideo.play();
    },

    // 切换点赞状态
    async toggleLike(postId) {
        try {
            const post = await API.likePost(postId);
            const postCard = document.querySelector(`[data-post-id="${postId}"]`);
            const likeBtn = postCard.querySelector('.post-action');
            
            if (post.liked) {
                likeBtn.classList.add('liked');
                Utils.showToast('已点赞 ❤️');
            } else {
                likeBtn.classList.remove('liked');
                Utils.showToast('已取消点赞');
            }
            
            likeBtn.querySelector('span').textContent = Utils.formatNumber(post.likes);
        } catch (error) {
            Utils.showToast('操作失败，请重试');
        }
    },

    // 显示评论
    showComments(postId) {
        Utils.showToast('评论功能开发中...');
    },

    // 分享动态
    sharePost(postId) {
        if (navigator.share) {
            navigator.share({
                title: 'QQ空间动态',
                text: '快来看看我的动态！',
                url: window.location.href
            });
        } else {
            // 复制链接到剪贴板
            navigator.clipboard.writeText(window.location.href);
            Utils.showToast('链接已复制到剪贴板');
        }
    },

    // 打开相册
    openAlbum(albumId) {
        Utils.showToast(`打开相册 ${albumId}`);
    },

    // 打开日志
    openBlog(blogId) {
        Utils.showToast(`打开日志 ${blogId}`);
    },

    // 显示访客资料
    showVisitorProfile(visitorId) {
        Utils.showToast(`查看访客资料 ${visitorId}`);
    },

    // 初始化模态框关闭事件
    initModals() {
        const modals = document.querySelectorAll('.modal');
        const closeBtns = document.querySelectorAll('.close');
        
        closeBtns.forEach(btn => {
            btn.onclick = function() {
                this.closest('.modal').style.display = 'none';
            };
        });
        
        window.onclick = function(event) {
            modals.forEach(modal => {
                if (event.target === modal) {
                    modal.style.display = 'none';
                }
            });
        };
    }
};

// 导出组件
window.Components = Components;
